@extends('home.layouts')
@section('content')

    <div class="pet_content_main">
        <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
            <div class="am-list-news-bd">
                <ul class="am-list" id="main_alistjh">
                    <!--缩略图在标题右边-->
                    @if(count($articles)!=0)
                    @foreach($articles as $m)
                            {{--文章--}}
                            <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                                <div class="pet_list_one_info">
                                    <div class="pet_list_one_info_l">
                                        <div class="pet_list_one_info_ico"><img src="
                                        @if(empty($m->avatar))
                                            {{asset('assets/images/home/a1.png')}}
                                            @else
                                            {{$m->avatar}}-40X40
                                                    @endif
                                                    " alt=""></div>
                                        <div class="pet_list_one_info_name">
                                            @if(empty($m->username))
                                                大佬
                                            @else
                                                {{$m->username}}
                                            @endif
                                        </div>
                                        <small> &nbsp;&nbsp;{{date('Y-m-d H:i:s',$m->created_at)}}发布</small>
                                    </div>
                                    <div class="pet_list_one_info_r">
                                        <div class="pet_list_tag pet_list_tag_xxs">{{$m->category}}</div>
                                    </div>
                                </div>
                                <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
                                    <h3 class="am-list-item-hd pet_list_one_bt"><a href="{{url('articledetail/'.$m->id)}}" class="">{{$m->title}}</a></h3>
                                    <div class="am-list-item-text pet_list_one_text">
                                        {{$m->content}}
                                    </div>

                                </div>
                                <div class="am-u-sm-4 am-list-thumb">
                                    <a href="{{url('articledetail/'.$m->id)}}" class="">
                                        @if(!empty($m->cover))
                                            <img src="{{$m->cover}}-300X230" class="pet_list_one_img" style="height: 76px;width: 100px;" alt=""/>
                                        @else
                                            <img src="{{asset('assets/images/home/q4.jpg')}}" class="pet_list_one_img" style="height: 76px;width: 100px;" alt=""/>
                                        @endif
                                    </a>
                                </div>
                            </li>
                    @endforeach
                    @else
                        <h4 style="text-align: center">没有任何东西啊</h4>
                        @endif
                </ul>
            </div>

        </div>

    </div>
        <div class="pet_article_dowload pet_dowload_more_top_off">
            <div class="pet_article_dowload_title" style="text-align: center">
                <button type="button" id="more" class="am-btn am-btn-default am-btn-block"
                        data-am-loading="{spinner: 'circle-o-notch', loadingText: 'loading...', resetText: '加载更多'}">加载更多</button>
            </div>
        </div>
@endsection
@section('javascript')
    <script>
        page=2;
        $('#more').click(function () {
            var $btn = $(this);
            $btn.button('loading');
            @if($category_id==-1)
                gurl='{{url('getalist')}}/'+page;
            @else
                    gurl='{{url('getalist')}}/'+page+'/'+{{$category_id}};
            @endif
            $.get(gurl, function (res) {
                page+=1;
                /************处理显示数据*************/
                html="";
                $.each(res,function(i,item){
                    if(item.avatar==null){
                        console.log(item.avatar);
                        avatar='{{asset('assets/images/home/a1.png')}}';
                    }else{
                        avatar=item.avatar+'-40X40';
                    }
                    if(item.username==null){
                        username='大佬';
                    }else{
                        username=item.username;
                    }
                    html+='<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block"><div class="pet_list_one_info"><div class="pet_list_one_info_l"><div class="pet_list_one_info_ico"><img src="'
                    html+=avatar+'"></div><div class="pet_list_one_info_name">';
                    cate=item.category;
                    url='{{url('articledetail')}}/'+item.id;

                    html+=username+'</div><small> &nbsp;&nbsp; '+getDate(item.created_at)+'发布</small></div><div class="pet_list_one_info_r">' +
                            '<div class="pet_list_tag pet_list_tag_xxs">' +cate +
                            '</div></div></div><div class=" am-u-sm-8 am-list-main pet_list_one_nr"><h3 class="am-list-item-hd pet_list_one_bt">' +
                            '<a href="'+url+'" class="">'+item.title+'</a></h3>';
                    html+='<div class="am-list-item-text pet_list_one_text">';
                    content=item.content;
                    html+=content+'</div></div><div class="am-u-sm-4 am-list-thumb"><a href="';
                    html+='{{url('articledetail')}}/'+item.id+'" class="">';
                    if(item.cover==''){
                        cover='{{asset('assets/images/home/q4.jpg')}}';
                    }else{
                        cover=item.cover+'-300X230';
                    }
                    html+='<img src="'+cover+'" class="pet_list_one_img" style="height: 76px;width: 100px;" /></a></div></li>'
                });
                if(html!=''){
                    $("#main_alistjh").append(html);
                    sdgs();
                    $btn.button('reset');
                }else{
                    $btn.button('reset');
                    layer.msg('没有啦-_-!!');
                }
            });
        });

        function getDate(timeLog) {
            var date = new Date(timeLog*1000);
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = (date.getDate()<10?'0' +date.getDate():date.getDate())+ ' ';
            h = (date.getHours()<10?'0'+date.getHours():date.getHours()) + ':';
            m = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()) + ':';
            s = (date.getSeconds()<10?'0'+date.getSeconds():date.getMinutes());
            return Y+M+D+h+m+s;
        }

        function sdgs(){
            // 动态计算新闻列表文字样式
            auto_resize();
            $(window).resize(function() {
                auto_resize();
            });
            $('.am-list-thumb img').load(function(){
                auto_resize();
            });

            $('.am-list > li:last-child').css('border','none');
            function auto_resize(){
                $('.pet_list_one_nr').height($('.pet_list_one_img').height());

            }
            $('.pet_nav_gengduo').on('click',function(){
                $('.pet_more_list').addClass('pet_more_list_show');
            });
            $('.pet_more_close').on('click',function(){
                $('.pet_more_list').removeClass('pet_more_list_show');
            });
        }
    </script>
    @endsection